<!--  -->
<template>
  <pageTabelLayout :loadings="fullPageLoading">
    <template #pageHeader>
      <a-form :model="form" layout="inline" size="mini">
        <a-form-item label="客户">
          <a-input
            allow-clear
            class="bacClass"
            v-model="form.customName"
            :style="{ width: '150px' }"
            @press-enter="huiche"
          />
        </a-form-item>
        <a-form-item label="织布单号">
          <a-input
            allow-clear
            class="bacClass"
            v-model="form.planOrderCode"
            :style="{ width: '150px' }"
            @press-enter="huiche"
          />
        </a-form-item>
        <a-form-item label="坯布编号">
          <a-input
            allow-clear
            class="bacClass"
            v-model="form.greyCode"
            :style="{ width: '150px' }"
            @press-enter="huiche"
          />
        </a-form-item>
        <a-form-item label="机台号">
          <a-input
            allow-clear
            class="bacClass"
            v-model="form.schedulMachineCode"
            :style="{ width: '150px' }"
            @press-enter="huiche"
          />
        </a-form-item>
      </a-form>
      <!-- '开需求单', -->
      <div class="cssToolbar">
        <!-- `${permissionStore.hasPermisson('zbdpc.ypccx') ? '查询' : ''}`,
            `${permissionStore.hasPermisson('zbdpc.kzzgyd') ? '开织造工艺单' : ''}`,
            // `${permissionStore.hasPermisson('zbdpc.dybf') ? '打印布飞' : ''}`,
            '打印布飞(新)',
            `${permissionStore.hasPermisson('zbdpc.zbtzd') ? '织布通知单' : ''}`,
            '织布通知单(对接订单模版)',
            // `${permissionStore.hasPermisson('zbdpc.dyjtz') ? '打印机台纸' : ''}`,
            `${permissionStore.hasPermisson('zbdpc.ypcdc') ? '导出' : ''}`, -->
        <Toolbar
          :items="[
            `${permissionStore.hasPermisson('zbdfs.qxpc') ? '取消排产' : ''}`,
            `${permissionStore.hasPermisson('zbdfs.cx') ? '查询' : ''}`,
          ]"
          @select="cx"
          @flycloth="dyBf"
          @picking="pickings"
          @paper="paper"
          @qxPc="counters"
          @export="exports"
          @zbtzd="zbtzds"
          @addZgyds="addZgydss"
          @dyBoufeix="dyBoufeixs"
          @zbtzdDj="zbtzdDjs"
        >
        </Toolbar>
      </div>
    </template>
    <template #pageTabel>
      <a-spin
        :loading="form.pageLoading"
        tip="加载中"
        dot
        style="height: 100%; width: 100%; z-index: 999"
      >
        <!-- <a-table size="mini" :scrollbar="true" sticky-header stripe :bordered="{ cell: true }" :columns="tableColumns"
            :row-selection="{ showCheckedAll: true, width: 50 }" :style="{
                height: pageData.rHeight - 360 + 'px'
            }" v-model:selected-keys="selectedRowKeys" :loading="table.tableLoading" :data="table.dataList"
            :pagination="false" :rowKey="rowKey">
            <template #planOrderState="{ record }">
                <a-button v-if="record.planOrderState == 2" type="primary" size="mini" status="danger" shape="round">
                    紧急&nbsp
                </a-button>
                <a-button v-if="record.planOrderState == 1" type="primary" size="mini" status="success" shape="round">
                    &nbsp&nbsp急&nbsp&nbsp
                </a-button>
                <a-button v-if="record.planOrderState == 0" status="danger" size="mini" shape="round">
                    正常&nbsp
                </a-button>
            </template>
            <template #planState="{ record }">
                <span v-if="record.planState == 0">自行生产</span>
            </template>
            <template #alite="{ record }">
                <a-button @click="pcUpdate(record)" type="primary" size="small">修改</a-button>
            </template>
                </a-table> -->
        <AgGridVuesCopys
          :rowHeight="33"
          :headerHeight="33"
          :suppressCopyRowsToClipboard="true"
          :suppressDragLeaveHidesColumns="true"
          rowSelection="multiple"
          @grid-ready="gridReady"
          @columnResized="onColumnResized"
          @columnMoved="onColumnMoved"
          @columnVisible="onColumnVisible"
          style="height: calc(100% - 45px)"
          :defaultColDef="defaultColDef"
          class="ag-theme-alpine"
          :rowData="table.dataList"
          :columnDefs="tc"
          :localeText="localeText1"
          @click="clickRowSelection"
        ></AgGridVuesCopys>
        <paginationCopys
          :page-size-options="pagingList1"
          :total="total"
          show-total
          show-jumper
          show-page-size
          @change="PageSize"
          @page-size-change="change1"
          style="justify-content: center"
          :page-size="size"
          :current="page"
        />
      </a-spin>
    </template>

    <a-modal v-model:visible="visible" ok-text="打印" @ok="print" :width="800">
      <template #title> 机台织造生产通知单打印 </template>
      <div id="jitdy">
        <div id="jitdy2">生产通知单(机台纸)</div>
        <table class="isTable">
          <tr>
            <td>机号</td>
            <td>{{ isDatasShuju.planMachineCode }}</td>
            <td>位置号</td>
            <td>{{ isDatasShuju.planMachineCode }}</td>
            <td>织造序号</td>
            <td>{{ isDatasShuju.weaveCode }}</td>
          </tr>
          <tr>
            <td>订单号</td>
            <td>{{ isDatasShuju.customOrderNo }}</td>
            <td>预排匹数</td>
            <td>{{ isDatasShuju.pieceNum }}</td>
            <td>颜色</td>
            <td>{{ isDatasShuju.colorName }}</td>
          </tr>
          <tr>
            <td>针筒</td>
            <td colspan="3">{{ isDatasShuju.workDrum }}</td>
            <td>抽针</td>
            <td>{{ isDatasShuju.drawnNeedleState == 0 ? '抽针' : '圆筒' }}</td>
          </tr>
          <tr>
            <td>坯布编号</td>
            <td colspan="3">{{ isDatasShuju.greyCode }}</td>
            <td>批号</td>
            <td>{{ isDatasShuju.greyBatchNo }}</td>
          </tr>
          <tr>
            <td>坯布名称</td>
            <td colspan="3">{{ isDatasShuju.greyName }}</td>
            <td></td>
            <td>巨丰</td>
          </tr>
        </table>
        <table class="isTable1">
          <!-- <tr class="isTrTdNo">
                <td>666</td>
                <td>666</td>
                <td>666</td>
                <td>666</td>
                <td>666</td>
                <td>666</td>
                <td>666</td>
                <td>666</td>
                                                                    </tr> -->
          <tr>
            <td colspan="2">原料编号</td>
            <td colspan="2">原料名称</td>
            <td colspan="1">纱牌</td>
            <td colspan="2">色号/色称/等级</td>
            <td colspan="1">纱批</td>
          </tr>
          <tr v-for="item in isDatasShuju.planOrderRawmaterials">
            <td colspan="2">{{ item.rawmaterialCode }}</td>
            <td colspan="2">{{ item.rawmaterialName }}</td>
            <td colspan="1">{{ item.yarnCard }}</td>
            <td colspan="2">{{ item.colorCode }}/{{ item.colorName }}/{{ item.level }}</td>
            <td colspan="1">{{ item.batch }}</td>
          </tr>
        </table>
        <div class="footer">
          <div>
            <span>纱长:</span><span>{{ isDatasShuju.yarnLong }}</span>
          </div>
          <div class="footer2">
            <span>油速:</span>
          </div>
        </div>
        <table class="isTable2">
          <tr :style="{ height: '15px' }">
            <td rowspan="2">常见疵点</td>
            <td colspan="2">预防措施</td>
          </tr>
          <tr :style="{ height: '15px' }">
            <td>接机前</td>
            <td>接机后</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
    </a-modal>
    <a-modal v-model:visible="visibles1" ok-text="打印" @ok="prints" :width="800">
      <template #title> 织布通知单 </template>
      <div class="isZbous" id="zbdy">
        <!-- <div class="isZbouss">试纱单:{{ isDatasShuju.businessType }}</div> -->
        <div class="isZbouss">生产通知单</div>
        <div class="isZbouss1">
          <!-- <span>客户名称:{{ isDatasShuju.customName }}</span> -->
          <span>织厂:{{ isDatasShuju.outSouringCompany }}</span>
          <span>客户订单号:{{ isDatasShuju.customOrderNo }}</span>
          <span class="isZbouss1-1">试纱单</span>
        </div>
        <div class="isZbouss2">
          <span>
            <span>开单日期:{{ isDatasShuju.planDate }}</span
            ><span></span>
          </span>
          <span>
            <span>织造交期:{{ isDatasShuju.weavDeliveryDate }}</span
            ><span></span>
          </span>
          <!-- <span>
                    <span>完成日期:{{ isDatasShuju.shipmentDate }}</span><span></span>
                </span>
                <span>
                    <span>织工:{{ isDatasShuju.price }}</span><span></span>
                </span> -->
        </div>
        <table class="isTable">
          <tr>
            <td colspan="2">客户名称</td>
            <td colspan="4">{{ isDatasShuju.customName }}</td>
            <td colspan="2">织布单号</td>
            <td colspan="4">{{ isDatasShuju.planOrderCode }}</td>
            <td colspan="2">生产单号</td>
            <!-- {{ isDatasShuju.weaveCode }} -->
            <td colspan="4"></td>
          </tr>
          <tr>
            <td colspan="2">坯布编号</td>
            <td colspan="4">{{ isDatasShuju.greyCode }}</td>
            <td colspan="2">坯布名称</td>
            <td colspan="4">{{ isDatasShuju.greyName }}</td>
            <td colspan="2">可配色称</td>
            <td colspan="4">{{ isDatasShuju.matchColor }}</td>
          </tr>
          <tr>
            <td colspan="2">机型</td>
            <td colspan="4">{{ isDatasShuju.grey[0].machineType }}</td>
            <td colspan="2">针寸数</td>
            <td colspan="4">{{ isDatasShuju.workDrum }}</td>
            <td colspan="2">是否抽针</td>
            <td colspan="4">{{ isDatasShuju.drawnNeedleState == 0 ? '抽针' : '否' }}</td>
          </tr>
          <tr>
            <td colspan="2">坯布批号</td>
            <td colspan="4">{{ isDatasShuju.greyBatchNo }}</td>
            <td colspan="2">指令重量</td>
            <td colspan="4">{{ isDatasShuju.orderWeight }}公斤</td>
            <td colspan="2">包装类型</td>
            <td colspan="4">{{ isDatasShuju.type }}</td>
          </tr>
          <tr>
            <td colspan="2">商品号</td>
            <td colspan="4">{{ isDatasShuju.productColthCode }}</td>
            <!-- <td colspan="2">织损</td>
                    <td colspan="4">{{ isDatasShuju.lossRate }}</td> -->
            <td colspan="2">匹数</td>
            <td colspan="4">{{ isDatasShuju.pieceNum }}</td>
            <td colspan="2">成品门幅</td>
            <td colspan="4">{{ isDatasShuju.width }}</td>
          </tr>
          <tr>
            <td colspan="2">成品克重</td>
            <td colspan="10">{{ isDatasShuju.weight }}</td>
          </tr>
          <tr>
            <td colspan="2">用纱代码</td>
            <td colspan="2">原料名称</td>
            <td colspan="2" style="width: 60px">纱牌</td>
            <td colspan="2" style="width: 60px">纱批</td>
            <td colspan="2">色号/色称</td>
            <td colspan="2">用纱比例</td>
            <td colspan="2" style="width: 90px">织损</td>
            <td colspan="2" style="width: 120px">可发纱量</td>
            <!-- <td colspan="2">注释</td> -->
          </tr>
          <tr v-for="item in isDatasShuju.planOrderRawmaterials">
            <td colspan="2">{{ item.rawmaterialCode }}</td>
            <td colspan="2">{{ item.rawmaterialName }}</td>
            <td colspan="2">{{ item.yarnCard }}</td>
            <td colspan="2">{{ item.batch }}</td>
            <td colspan="2">{{ item.colorCode + '/' + item.colorName }}</td>
            <td colspan="2">{{ item.yarnProportion }}</td>
            <td colspan="2">{{ item.weaveLoss }}</td>
            <td colspan="2">{{ item.canDeliveryYarnNum }}</td>
            <!-- <td colspan="2"></td> -->
          </tr>
        </table>
        <div class="gyYaoqiu">工艺要求</div>
        <div class="gyYaoqius">
          <div style="width: 100%; overflow: auto">
            <div>
              <span style="padding: 5px" v-if="dataFormsz.machineType != '单面机'">上排</span>
              <span style="padding: 5px" v-if="dataFormsz.machineType === '单面机'">排针</span>
              <input
                disabled
                v-for="(item, index) in zzpzdata"
                :key="index"
                style="width: 30px; border: 1px solid black; padding: 5px; text-align: center"
                v-model="item.upBasin"
              />
            </div>
            <div v-if="dataFormsz.machineType != '单面机'">
              <span
                style="padding: 5px"
                :style="{
                  'padding-right': dataFormsz.machineType === '螺纹机' ? '35px' : '5px',
                }"
                >下排</span
              >
              <input
                disabled
                v-for="(item, index) in zzpzdata"
                :key="index"
                style="width: 30px; border: 1px solid black; padding: 5px; text-align: center"
                v-model="item.belowBasin"
              />
            </div>
          </div>
          <div
            v-for="(item, index) in sjdata.sj as any"
            style="text-align: center; margin: 20px auto; width: 100%; overflow-x: auto"
          >
            <div
              style="
                text-align: center;
                color: #165dff;
                font-size: 16px;
                background-color: aliceblue;
                border-bottom: 0.5px solid #ccc;
              "
            >
              {{ item.type }}
            </div>

            <div class="thead" style="background-color: aliceblue">
              <div class="th" style="width: 50px">序号</div>
              <div class="th" style="width: 150px">用针</div>
              <div
                class="th"
                style="width: 40px"
                v-for="i2 in item.typeData[0].needleList"
                :key="i2.way"
              >
                {{ i2.way }}
              </div>
            </div>
            <div class="tbody" v-for="i1 in item.typeData">
              <div class="td" style="width: 50px">{{ i1.serialNumber }}</div>
              <div class="td" style="width: 150px">
                <a-input disabled v-model="i1.needleName"></a-input>
              </div>
              <div
                class="td"
                style="width: 40px; vertical-align: middle; border: 1px solid gray"
                v-for="i2 in i1.needleList"
              >
                <div style="width: 100%; height: 100%"
                  >{{ tags.filter((o) => o.id === i2.needle)[0]?.val }}
                </div>
              </div>
            </div>
          </div>
          <div class="tbody" style="margin-top: 10px">
            <div
              style="
                text-align: center;
                color: #165dff;
                font-size: 16px;
                background-color: aliceblue;
                border-bottom: 0.5px solid #ccc;
              "
            >
              排纱
            </div>
            <div class="trow" v-for="(item, index) in psList">
              <div
                style="border: 1px solid #ccc; height: 30px; box-sizing: border-box"
                v-for="(item1, index1) in item"
              >
                <input
                  disabled
                  v-model="item1.val"
                  v-if="
                    !((index > 0 && (index1 == 0 || index1 == 1)) || (index == 0 && index1 === 2))
                  "
                  style="width: 80px; vertical-align: top; height: 100%; text-align: center"
                  :class="{ active: index1 == 0 || index1 == 1 }"
                />
                <div
                  v-if="(index > 0 && (index1 == 0 || index1 == 1)) || (index == 0 && index1 === 2)"
                  style="width: 80px; vertical-align: top; height: 100%; text-align: center"
                  :class="{ active: index1 == 0 || index1 == 1 }"
                  >{{ item1.val }}</div
                >
              </div>
            </div>
          </div>
          <div style="display: flex; align-items: center">
            <div style="width: 50%">
              <span>裁口排针</span>
              <a-input disabled v-model="ckpzobj.pinHeader"> </a-input>
            </div>
            <div style="width: 50%">
              <span>纱线排列</span>
              <a-input disabled v-model="ckpzobj.arrangement"> </a-input>
            </div>
          </div>
        </div>
        <table class="isTable">
          <tr>
            <td>实际参数</td>
            <td>齿轮</td>
            <td>布架宽度</td>
            <td>底座垫片</td>
            <td :style="{ width: '160px', textAlign: 'left' }">机速:</td>
            <td :style="{ width: '160px', textAlign: 'left' }">实开模板:</td>
          </tr>
          <tr>
            <td></td>
            <td>{{
              isDatasShuju.machineStandard.length != 0 ? isDatasShuju.machineStandard[0].gear : ''
            }}</td>
            <td
              >{{
                isDatasShuju.machineStandard.length != 0
                  ? isDatasShuju.machineStandard[0].clothRackWidth
                  : ''
              }}
            </td>
            <td
              >{{
                isDatasShuju.machineStandard.length != 0
                  ? isDatasShuju.machineStandard[0].baseGasket
                  : ''
              }}
            </td>
            <td :style="{ width: '160px', textAlign: 'left' }">布架活动胶:</td>
            <td :style="{ width: '160px', textAlign: 'left' }">针盘高度:</td>
          </tr>
          <tr>
            <td>布架张力A-D</td>
            <td>布架张力1-16</td>
            <td>送纱盘-面盘</td>
            <td>送纱盘-中盘</td>
            <td :style="{ width: '160px', textAlign: 'left' }">布架张力:</td>
            <td :style="{ width: '160px', textAlign: 'left' }">布架幅宽:</td>
          </tr>
          <tr>
            <td
              >{{
                isDatasShuju.machineStandard.length != 0
                  ? isDatasShuju.machineStandard[0].clothTensionAD
                  : ''
              }}
            </td>
            <td
              >{{
                isDatasShuju.machineStandard.length != 0
                  ? isDatasShuju.machineStandard[0].clothTensionOS
                  : ''
              }}
            </td>
            <td>{{
              isDatasShuju.machineStandard.length != 0
                ? isDatasShuju.machineStandard[0].sandTableSurfacePlate
                : ''
            }}</td>
            <td>{{
              isDatasShuju.machineStandard.length != 0
                ? isDatasShuju.machineStandard[0].sandTrayMiddlePlate
                : ''
            }}</td>
            <td :style="{ width: '160px', textAlign: 'left' }">下机克重:</td>
            <td :style="{ width: '160px', textAlign: 'left' }">下机封度:</td>
          </tr>
          <tr>
            <td>送纱盘-底盘</td>
            <td>争食</td>
            <td>分食</td>
            <td>不争不分</td>
            <td :style="{ width: '160px', textAlign: 'left' }">织针型号:</td>
            <td rowspan="4">{{
              isDatasShuju.planMachineCode ? isDatasShuju.planMachineCode : ''
            }}</td>
            <!-- <td>11</td> -->
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td
              >{{
                isDatasShuju.machineStandard.length == 0
                  ? ''
                  : isDatasShuju.machineStandard[0].dodge == 1
                  ? '√'
                  : ''
              }}
            </td>
            <td>{{
              isDatasShuju.machineStandard.length == 0
                ? ''
                : isDatasShuju.machineStandard[0].broken == 1
                ? '√'
                : ''
            }}</td>
            <td>{{
              isDatasShuju.machineStandard.length == 0
                ? ''
                : isDatasShuju.machineStandard[0].allTrue == 1
                ? '√'
                : ''
            }}</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>织针型号</td>
            <td>织针1段</td>
            <td>织针2段</td>
            <td>织针3段</td>
            <td>织针需求等级</td>
          </tr>
          <tr>
            <td>{{
              isDatasShuju.machineStandard.length != 0
                ? isDatasShuju.machineStandard[0].needleModel
                : ''
            }}</td>
            <td
              >{{
                isDatasShuju.machineStandard.length == 0
                  ? ''
                  : isDatasShuju.machineStandard[0].needleOnePerod == 1
                  ? '√'
                  : ''
              }}
            </td>
            <td
              >{{
                isDatasShuju.machineStandard.length == 0
                  ? ''
                  : isDatasShuju.machineStandard[0].needleTwoPerod == 1
                  ? '√'
                  : ''
              }}
            </td>
            <td
              >{{
                isDatasShuju.machineStandard.length == 0
                  ? ''
                  : isDatasShuju.machineStandard[0].needleThreePerod == 1
                  ? '√'
                  : ''
              }}
            </td>
            <td>{{
              isDatasShuju.machineStandard.length != 0
                ? isDatasShuju.machineStandard[0].needleGrade
                : ''
            }}</td>
          </tr>
          <tr>
            <td class="trTds">计划单备注</td>
            <td colspan="5">{{ isDatasShuju.remark ? isDatasShuju.remark : '' }}</td>
          </tr>
          <tr>
            <td class="trTds">工艺备注</td>
            <td colspan="5">{{ isDatasShuju.otherRemark ? isDatasShuju.otherRemark : '' }}</td>
          </tr>
        </table>
        <div class="footers">
          <div>
            <span
              >制单:{{ isDatasShuju.tabulationPerson ? isDatasShuju.tabulationPerson : '' }}</span
            >
            <span>制单时间:{{ isDatasShuju.planDate ? isDatasShuju.planDate : '' }}</span>
            <span>审核:{{ isDatasShuju.auditPerson ? isDatasShuju.auditPerson : '' }}</span>
          </div>
        </div>
      </div>
    </a-modal>
    <a-drawer
      ok-text="保存"
      cancel-text="关闭"
      :drawer-style="{ zIndex: 999 }"
      :width="800"
      popup-container=".main-base-style"
      :height="pageData.rHeight"
      :visible="pageData.showAdd"
      placement="bottom"
      unmountOnClose
      @cancel="sideNo1"
      @ok="sideOks"
      :closable="false"
    >
      <template #title> 开需求单 </template>
      <div>
        <div>
          <a-form ref="formRef" :model="dataForms" size="mini" layout="vertical">
            <div>
              <a-space>
                <a-form-item label="计划需求单号" field="code">
                  <!-- 标记 -->
                  <a-input v-model="dataForms.planNeedCode" disabled :style="{ width: '280px' }" />
                </a-form-item>
                <a-form-item label="开单日期">
                  <a-input v-model="dataForms.planDate" disabled :style="{ width: '280px' }" />
                </a-form-item>
                <a-form-item label="计划单号">
                  <a-input v-model="dataForms.planOrderCode" disabled :style="{ width: '280px' }" />
                </a-form-item>
                <a-form-item label="坯布名称">
                  <a-input v-model="dataForms.greyName" disabled :style="{ width: '280px' }" />
                </a-form-item>
              </a-space>
              <a-space>
                <a-form-item label="坯布编号">
                  <a-input v-model="dataForms.greyCode" disabled :style="{ width: '280px' }" />
                </a-form-item>
                <a-form-item label="需求人">
                  <a-input
                    v-model="dataForms.tabulationPerson"
                    disabled
                    :style="{ width: '280px' }"
                  />
                </a-form-item>
              </a-space>
              <a-space>
                <a-form-item label="备注">
                  <a-input
                    class="bacClass"
                    v-model="dataForms.remark"
                    :style="{ width: '840px' }"
                  />
                </a-form-item>
              </a-space>
            </div>
          </a-form>
          <a-table
            size="mini"
            :scrollbar="true"
            sticky-header
            stripe
            :style="{ height: '500px' }"
            :columns="tableColumns1"
            :loading="tables.tableLoading"
            :data="tables.dataList"
            :pagination="false"
            :bordered="{ headerCell: true }"
          >
            <template #pickPieceWeight="{ record }">
              <a-input class="bacClass" v-model="record['pickPieceWeight']"></a-input>
            </template>
            <template #pickPieceNum="{ record }">
              <a-input-number class="bacClass" v-model="record.pickPieceNum"></a-input-number>
            </template>
          </a-table>
        </div>
      </div>
    </a-drawer>
    <a-drawer
      ok-text="关闭"
      cancel-text="关闭"
      :footer="false"
      :drawer-style="{ zIndex: 9999 }"
      :hide-cancel="true"
      :closable="false"
      @cancel="visible1.showAdd = false"
      :width="'100%'"
      :height="'100%'"
      :visible="visible1.showAdd"
      placement="bottom"
    >
      <template #title> 打印布飞 </template>
      <boufeiListdy v-model:visible1="visible1"></boufeiListdy>
    </a-drawer>
    <a-drawer
      popup-container=".main-base-style"
      :drawer-style="{ zIndex: 999 }"
      @cancel="gydNo"
      :width="'100%'"
      :height="'98%'"
      :visible="gyList.showAdd"
      placement="bottom"
      @ok="gydOk"
      ok-text="保存"
      cancel-text="关闭"
    >
      <template #title> 织造工艺单 </template>
      <a-form ref="formRefs" :model="dataFormsz" size="mini" layout="horizontal">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item label="工艺单号" label-col-flex="150px">
              <a-input
                class="bacClass"
                v-model="dataFormsz.planTechnologyCode"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="排产号" label-col-flex="150px">
              <a-input
                class="bacClass"
                v-model="dataFormsz.schedulCode"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="重量" label-col-flex="150px">
              <a-input
                class="bacClass"
                disabled
                v-model="dataFormsz.alreadyWeight"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="计划单号" label-col-flex="150px">
              <a-input
                class="bacClass"
                v-model="dataFormsz.planOrderCode"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item label="计划单重量" label-col-flex="150px">
              <a-input
                class="bacClass"
                v-model="dataFormsz.orderWeight"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="坯布编号" label-col-flex="150px">
              <a-input class="bacClass" v-model="dataFormsz.greyCode" :style="{ width: '200px' }" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="坯布名称" label-col-flex="150px">
              <a-input class="bacClass" v-model="dataFormsz.greyName" :style="{ width: '200px' }" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="门幅" label-col-flex="150px">
              <a-input class="bacClass" v-model="dataFormsz.width" :style="{ width: '200px' }" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item label="克重" label-col-flex="150px">
              <a-input-number
                class="bacClass"
                v-model="dataFormsz.weight"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="车间" label-col-flex="150px">
              <a-input class="bacClass" v-model="dataFormsz.workshop" :style="{ width: '200px' }" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              label="机台号"
              field="machineCode"
              label-col-flex="150px"
              :rules="[{ required: true, message: '必填' }]"
              :validate-trigger="['change', 'blur']"
            >
              <!-- <a-input class="bacClass" v-model="dataFormsz.machine" :style="{ width: '200px' }" /> -->
              <a-select
                popup-container="html"
                class="bacClass"
                allow-clear
                allow-search
                v-model="dataFormsz.machineCode"
                @change="macChanges"
              >
                <a-option v-for="item in machineList">{{ item }}</a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-form ref="formRef" :model="dataFormszs" size="mini" layout="horizontal">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item label="机速" label-col-flex="150px">
              <a-input-number
                class="bacClass"
                v-model="dataFormszs.machineSpeed"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="争分食" label-col-flex="150px">
              <a-input class="bacClass" v-model="dataFormszs.compete" :style="{ width: '200px' }" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="布架活动胶" label-col-flex="150px">
              <a-input
                class="bacClass"
                v-model="dataFormszs.greyGlue"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="卷布张力" label-col-flex="150px">
              <a-input-number
                class="bacClass"
                v-model="dataFormszs.greyTension"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item label="布架幅度" label-col-flex="150px">
              <a-input-number
                class="bacClass"
                v-model="dataFormszs.clothRackWidth"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="筒高" label-col-flex="150px">
              <a-input-number
                class="bacClass"
                v-model="dataFormszs.needleHigh"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="下机克重" label-col-flex="150px">
              <a-input-number
                class="bacClass"
                v-model="dataFormszs.machineGWeight"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="坯布洗后克重" label-col-flex="150px">
              <a-input-number
                class="bacClass"
                v-model="dataFormszs.washGWeight"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item label="坯布洗后封度" label-col-flex="150px">
              <a-input-number
                class="bacClass"
                v-model="dataFormszs.washSeal"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="毛高" label-col-flex="150px">
              <a-input-number
                class="bacClass"
                v-model="dataFormszs.furHigh"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="纱线张力" label-col-flex="150px">
              <a-input-number
                class="bacClass"
                v-model="dataFormszs.yarnTension"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="针寸" label-col-flex="150px">
              <a-input
                class="bacClass"
                v-model="dataFormszs.workDrum"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item label="珠地边" label-col-flex="150px">
              <a-input
                class="bacClass"
                v-model="dataFormszs.beadJuggle"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="总针数" label-col-flex="150px">
              <a-input
                class="bacClass"
                v-model="dataFormszs.sumNeedleCount"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="坯布洗后丛密CPI" label-col-flex="150px">
              <a-input
                class="bacClass"
                v-model="dataFormszs.densityCPI"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="坯布洗后横密WPI" label-col-flex="150px">
              <a-input
                class="bacClass"
                v-model="dataFormszs.densityWPI"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item label="纱长" field="code" label-col-flex="150px">
              <a-input
                class="bacClass"
                v-model="dataFormszs.yarnLong"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="织针型号" label-col-flex="150px">
              <a-input
                class="bacClass"
                v-model="dataFormszs.needleType"
                :style="{ width: '200px' }"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-tabs :lazy-load="true">
        <a-tab-pane title="纱支结构" key="1">
          <a-table
            :bordered="{ cell: true }"
            :scrollbar="true"
            sticky-header
            :columns="columns"
            :data="dataYuls"
            :pagination="false"
          />
        </a-tab-pane>
        <a-tab-pane title="排针" key="2">
          <div>
            <div style="margin: 10px auto">
              <span>上排</span>
              <a-space>
                <input
                  disabled
                  size="mini"
                  v-for="(item, index) in zzpzdata"
                  :key="index"
                  style="width: 80px"
                  v-model="item.upBasin"
                />
              </a-space>
            </div>
            <div style="margin: 10px auto">
              <span>下排</span>
              <a-space>
                <input
                  disabled
                  size="mini"
                  v-for="(item, index) in zzpzdata"
                  :key="index"
                  style="width: 80px"
                  v-model="item.belowBasin"
                />
              </a-space>
            </div>
          </div>

          <div style="display: flex; align-items: center">
            <div style="width: 50%">
              <span>裁口排针</span>
              <a-input disabled v-model="ckpzobj.pinHeader"> </a-input>
            </div>
            <div style="width: 50%">
              <span>纱线排列</span>
              <a-input disabled v-model="ckpzobj.arrangement"> </a-input>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane title="排三角" key="3">
          <div
            v-for="(item, index) in sjdata.sj as any"
            style="text-align: center; margin: 20px auto; width: 100%; overflow-x: auto"
          >
            <div
              style="
                text-align: center;
                color: #165dff;
                font-size: 16px;
                background-color: aliceblue;
                border-bottom: 0.5px solid #ccc;
              "
            >
              {{ item.type }}
            </div>

            <div class="thead" style="background-color: aliceblue">
              <div class="th" style="width: 50px">序号</div>
              <div class="th" style="width: 150px">用针</div>
              <div
                class="th"
                style="width: 40px"
                v-for="i2 in item.typeData[0].needleList"
                :key="i2.way"
              >
                {{ i2.way }}
              </div>
            </div>
            <div class="tbody" v-for="i1 in item.typeData">
              <div class="td" style="width: 50px">{{ i1.serialNumber }}</div>
              <div class="td" style="width: 150px">
                <a-input disabled v-model="i1.needleName"></a-input>
              </div>
              <div
                class="td"
                style="height: 34px; width: 40px; vertical-align: middle; border: 1px solid gray"
                v-for="i2 in i1.needleList"
              >
                <div style="width: 100%; height: 100%"
                  >{{ tags.filter((o) => o.id === i2.needle)[0]?.val }}
                </div>
              </div>
            </div>
            <div style="height: 20px"></div>
            <div style="height: 20px"></div>
            <div style="border: 1px solid #ccc"></div>
          </div>
          <div class="tbody" style="margin-top: 10px">
            <div
              style="
                text-align: center;
                color: #165dff;
                font-size: 16px;
                background-color: aliceblue;
                border-bottom: 0.5px solid #ccc;
              "
            >
              排纱
            </div>
            <div class="trow" style="background-color: aliceblue">
              <div
                style="
                  height: 30px;
                  display: inline-block;
                  width: 82px;
                  vertical-align: top;
                  box-sizing: border-box;
                "
              >
              </div>
              <div
                style="
                  height: 30px;
                  display: inline-block;
                  width: 82px;
                  vertical-align: top;
                  box-sizing: border-box;
                "
              >
              </div>
            </div>
            <div class="trow" v-for="(item, index) in psList">
              <div
                style="border: 1px solid #ccc; height: 30px; box-sizing: border-box"
                v-for="(item1, index1) in item"
              >
                <input
                  v-model="item1.val"
                  v-if="
                    !((index > 0 && (index1 == 0 || index1 == 1)) || (index == 0 && index1 === 2))
                  "
                  style="width: 50px; vertical-align: top; height: 100%; text-align: center"
                  :class="{ active: index1 == 0 || index1 == 1 }"
                />
                <div
                  v-if="(index > 0 && (index1 == 0 || index1 == 1)) || (index == 0 && index1 === 2)"
                  style="width: 50px; vertical-align: top; height: 100%; text-align: center"
                  :class="{ active: index1 == 0 || index1 == 1 }"
                  >{{ item1.val }}</div
                >
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane title="关联商品" key="4">
          <a-table
            stripe
            :bordered="{ cell: true }"
            :columns="sptablecol"
            size="mini"
            :data="sptablecolData"
            :pagination="false"
          >
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-drawer>
    <a-drawer
      ok-text="关闭"
      :drawer-style="{ zIndex: 9999 }"
      @ok="bc"
      :width="'100%'"
      :height="'100%'"
      :visible="bfShowAdd"
      placement="bottom"
      :hide-cancel="true"
    >
      <template #title> 模版 </template>
      <iframe v-if="bfShowAdd" style="width: 100%; height: 100%" :src="srcUrl"></iframe>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang="ts" setup>
  import { reactive, toRefs, ref, onMounted } from 'vue'
  import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
  } from '@/hooks/table'
  import Toolbar from '@/components/Toolbar.vue'
  import { post, get } from '@/api/http'
  import { Message } from '@arco-design/web-vue'
  import { Modal } from '@arco-design/web-vue'
  import printJS from 'print-js'
  import boufeiListdy from './boufeiListdy.vue'
  import { tableColumns as tableColumns1 } from '../useTableList'
  import emitter from '@/hooks/useEventBus'
  
  import { localeText } from '@/api/aggridZw'
  import usePermission from '@/store/modules/permission'
  import { pagingList } from '@/api/paging'
  import { EXELTABLE } from '@/utils/exportEXCEL'
  import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
  const permissionStore = usePermission()
  const pagingList1: any = ref(pagingList)
  const localeText1: any = ref(localeText)
  const fullPageLoading = ref(false)
  const defaultColDef: any = {
    sortable: true,
    resizable: true,
    filter: true,
    // flex: 1
  }
  const gridOption = ref()
  const colState = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
  }
  const selectedRowList = ref([])
  const clickRowSelection = () => {
    selectedRowKeys.value = gridOption.value.getSelectedRows().map((res: any) => res.id)
    //点击勾选框的时候 获取已经勾选的行数据
    selectedRowList.value = gridOption.value.getSelectedRows()
  }

  const pcUpdate = (e: any) => {
    emitter.emit('pcUpdate', e)
  }

  const table = useTable()

  const tables = useTable()
  const total = ref(0)
  const page = ref(1)
  const size = ref(10)
  function PageSize(val: any) {
    page.value = val
    doRefresh()
  }
  function change1(val: any) {
    size.value = val
    doRefresh()
  }

  function doRefresh() {
    form.pageLoading = true
    updateGridState01()
    post({
      url: 'planSingle/planSchedul/getPage',
      data: {
        page: page.value,
        size: size.value,
        schedulState: 2,
        schedulMachineCode: form.schedulMachineCode,
        customName: form.customName,
        planOrderCode: form.planOrderCode,
        greyCode: form.greyCode,
      },
    })
      .then(({ data, code }: any) => {
        if (code === 200) {
          table.handleSuccess(data.list)
          gridOption.value.setRowData(data.list)
          total.value = data.total
          emitter.emit('bcCx')
        }
      })
      .catch(console.log)
      .finally(() => {
        form.pageLoading = false
      })
  }

  // const qx = () => {
  //     visible1.showAdd = false
  // }

  const cx = () => {
    page.value = 1
    doRefresh()
  }

  // let gsDatas = ref<any[]>([])
  onMounted(() => {
    pageData.rHeight = document.getElementsByClassName('main-section')[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
      pageData.rHeight = pageData.rHeight
    }
    doRefresh()
    // get({
    //     url:'hr/company/getAllActiveCompany'
    // }).then(res => {
    //     if (res.code == 200) {
    //         gsDatas.value = JSON.parse(res.data)
    //     }
    // })
  })
  const pageData = reactive({
    showAdd: false,
    rHeight: 0,
  })
  const visible = ref(false)
  const visibles1 = ref(false)
  const paper = async () => {
    if (selectedRowKeys.value.length === 0) {
      Message.error('请先勾选')
      return
    }
    if (selectedRowKeys.value.length > 1) {
      Message.error('只能勾选一条')
      return
    }
    const dataListArray = table.dataList.filter((val: any) => {
      return val.id == selectedRowKeys.value[0]
    })
    const res: any = await post({
      url: 'planSingle/planSchedul/getPrintMachineInfo',
      data: [
        {
          id: dataListArray[0].id,
          planOrderId: dataListArray[0].planOrderId,
          greyCode: dataListArray[0].greyCode,
          greyName: dataListArray[0].greyName,
        },
      ],
    })
    if (res.code == 200) {
      post({
        url: 'planSingle/planSchedul/printShippingData',
        data: res.data,
        responseType: 'blob',
      }).then((zzx: any) => {
        let reader = new FileReader()
        reader.readAsDataURL(zzx)
        reader.onload = function () {
          let pdfBase64 = reader.result.replace('data:application/pdf;base64,', '')
          printJS({ printable: pdfBase64, type: 'pdf', base64: true })
        }
      })
      // isDatasShuju = res.data[0]
      // visible.value = true
    }
    console.log(table.dataList)
  }
  const handleOk = () => {}
  const { selectedRowKeys } = useRowSelection()

  const tableColumns: any = [
    {
      title: '公司',
      key: 'outSouringCompany',
      dataIndex: 'outSouringCompany',
      width: 150,
    },
    {
      title: '织布单号',
      key: 'planOrderCode',
      dataIndex: 'planOrderCode',
      width: 150,
    },
    // {
    //     title: "计划类型",
    //     key: "planType",
    //     dataIndex: "planType",
    //     width: 150,
    // },
    {
      title: '客户',
      key: 'customName',
      dataIndex: 'customName',
      width: 150,
    },
    {
      title: '机台号',
      key: 'schedulMachineCode',
      dataIndex: 'schedulMachineCode',
      width: 150,
    },
    {
      title: '坯布编号',
      key: 'greyCode',
      dataIndex: 'greyCode',
      width: 200,
    },
    {
      title: '坯布名称',
      key: 'greyName',
      dataIndex: 'greyName',
      width: 450,
    },
    // {
    //     title: "产品类别",
    //     key: "productType",
    //     dataIndex: "productType",
    //     width: 150,
    // },
    {
      title: '面料种类',
      key: 'fabricType',
      dataIndex: 'fabricType',
      width: 150,
    },
    // {
    //     title: "品牌",
    //     key: "brandName",
    //     dataIndex: "brandName",
    //     width: 150,
    //     align: 'left'
    // },
    {
      title: '下单重量',
      key: 'orderWeight',
      dataIndex: 'orderWeight',
      width: 150,
    },
    // {
    //     title: "加工单价",
    //     key: "machinPrice",
    //     dataIndex: "machinPrice",
    //     width: 150,
    // },
    // {
    //     title: "加工金额",
    //     key: "machinMoney",
    //     dataIndex: "machinMoney",
    //     width: 150,
    // },
    {
      title: '计划单状态',
      key: 'planOrderState',
      dataIndex: 'planOrderState',
      slotName: 'planOrderState',
      width: 150,
      fixed: 'right',
    },
    // {
    //     title: "订单交期",
    //     key: "orderDeliveryDate",
    //     dataIndex: "orderDeliveryDate",
    //     width: 150,
    // },
    {
      title: '未排重量',
      key: 'noPmtWeight',
      dataIndex: 'noPmtWeight',
      width: 150,
    },
    {
      title: '已排重量',
      key: 'pmtWeight',
      dataIndex: 'pmtWeight',
      width: 150,
    },
    {
      title: '已生产重量',
      key: 'productWeight',
      dataIndex: 'productWeight',
      width: 150,
    },
    {
      title: '计划状态',
      key: 'planState',
      dataIndex: 'planState',
      slotName: 'planState',
      width: 150,
    },
    // {
    //     title: "操作",
    //     key: "alite",
    //     dataIndex: "alite",
    //     slotName: 'alite',
    //     width: 150,
    //     fixed: 'right'
    // }
  ]

  let tc: any[] = tableColumns.map((o: any) => {
    let obj = {
      headerName: o.title,
      field: o.key,
      pinned: o['fixed'],
    }
    if (o.key === 'planOrderState') {
      obj['resizable'] = false
      obj['sortable'] = false
      obj['lockPosition'] = 'right'
      obj['width'] = 120
      obj['cellRenderer'] = {
        template: ` <a-button v-if="b == 2" type="primary" size="mini" status="danger" shape="round">
                    紧急&nbsp
                </a-button>
                <a-button v-if="b == 1" type="primary" size="mini" status="danger" shape="round">
                    &nbsp&nbsp急&nbsp&nbsp
                </a-button>
                <a-button v-if="b == 0" status="success" size="mini" shape="round">
                    正常&nbsp
                </a-button>`,
        setup(props: any) {
          return {
            b: props.params.data.planOrderState,
          }
        },
      }
      obj['filterParams'] = {
        valueFormatter: function (params: any) {
          return params.value == '0'
            ? '正常'
            : params.value == '1'
            ? '急'
            : params.value == '2'
            ? '紧急'
            : ''
        },
      }
    }
    if (o.key == 'planState') {
      obj['resizable'] = false
      obj['sortable'] = false
      obj['cellRenderer'] = {
        template: ` <span v-if="b == 0">自行生产</span>`,
        setup(props: any) {
          return {
            b: props.params.data.planState,
          }
        },
      }
      obj['filterParams'] = {
        valueFormatter: function (params: any) {
          return params.value == '0' ? '自行生产' : ''
        },
      }
    }

    return obj
  })

  let a = [
    {
      showRowGroup: 'hide_def',
      headerName: '',
      checkboxSelection: true,
      headerCheckboxSelection: true,
      pinned: 'left',
      width: 50,
      resizable: false,
      filter: false,
      sortable: false,
      minWidth: 50,
      maxWidth: 50,
      lockPosition: 'left',
    },
  ]
  tc = a.concat(tc)

  const columns = useTableColumn([
    {
      title: '用纱代码',
      key: 'yarnSource',
      dataIndex: 'yarnSource',
      width: 150,
      slotName: 'yarnSource',
    },
    {
      title: '原料编号',
      key: 'yarnCode',
      dataIndex: 'yarnCode',
      width: 150,
    },
    {
      title: '原料名称',
      key: 'staple',
      dataIndex: 'staple',
      width: 150,
    },
    {
      title: '原料类别',
      key: 'yarnKind',
      dataIndex: 'yarnKind',
      width: 150,
    },
    {
      title: '原料属性',
      key: 'stockNature',
      dataIndex: 'stockNature',
      width: 150,
    },
    {
      title: '纱支',
      key: 'yarnCount',
      dataIndex: 'yarnCount',
      width: 150,
    },
    {
      title: '纱支类型',
      key: 'yarnType',
      dataIndex: 'yarnType',
      width: 150,
    },
    {
      title: '丹尼尔系数',
      key: 'danielCoefficient',
      dataIndex: 'danielCoefficient',
      width: 150,
    },
    {
      title: '纱支比例(%)',
      key: 'yarnCountProportion',
      dataIndex: 'yarnCountProportion',
      width: 150,
      slotName: 'yarnCountProportion',
    },
    {
      title: '实测纱比(%)',
      key: 'actualYarn',
      dataIndex: 'actualYarn',
      width: 150,
      slotName: 'actualYarn',
    },
    {
      title: '织布损',
      key: 'weavingDamage',
      dataIndex: 'weavingDamage',
      width: 150,
      slotName: 'weavingDamage',
    },
    {
      title: '颜色组号',
      key: 'colorGroup',
      dataIndex: 'colorGroup',
      width: 150,
      slotName: 'colorGroup',
    },
    {
      title: '循环间距',
      key: 'circularSpacing',
      dataIndex: 'circularSpacing',
      width: 150,
      slotName: 'circularSpacing',
    },
    // {
    //     title: "间距比",
    //     key: "gapRatio",
    //     dataIndex: "gapRatio",
    //     width: 150,
    //     slotName: "gapRatio"
    // },
    {
      title: '纱长',
      key: 'yarnLong',
      dataIndex: 'yarnLong',
      width: 150,
      slotName: 'yarnLong',
    },
  ])

  const pagination = usePagination(doRefresh)
  const rowKey = useRowKey('id')

  //反审
  const counters = () => {
    if (selectedRowKeys.value.length === 0) {
      Message.error('请先勾选')
      return
    }
    if (selectedRowKeys.value.length > 1) {
      Message.error('请单条反审')
      return
    }
    
    Modal.confirm({
      title: '系统提示',
      content: '订单取消排产',
      onOk() {
        fullPageLoading.value = true
        post({
          url: 'planSingle/planSchedul/audit',
          data: [
            {
              id: Number(selectedRowKeys.value),
              schedulState: 0,
            },
          ],
        }).then(({ code, data, message }: any) => {
          if (code === 200) {
            doRefresh()
            selectedRowKeys.value = []
            Message.success({
              content: '反审成功',
              duration: 5000,
            })
            emitter.emit('bcCx')
          } else {
            Message.success({
              content: message,
              duration: 5000,
            })
          }
          fullPageLoading.value = false
        })
      },
    })
  }
  //导出
  const exports = () => {
    // if (selectedRowKeys.value.length === 0) {
    //     Message.error('请先勾选')
    //     return
    // } else {
    //     //将表头拼接出来
    //     let head = "<th>织布单号</th><th>客户</th><th>机台号</th><th>坯布编号</th><th>坯布名称</th><th>面料种类</th><th>下单重量</th><th>未排重量</th><th>已排重量</th><th>已生产重量</th><th>计划单状态</th><th>计划状态</th>"
    //     //拿到当前表格数据与勾选的行做筛选

    //     let nowRow = table.dataList.filter(function (o) {
    //         return selectedRowKeys.value.indexOf(o["id"]) !== -1;
    //     })
    //     let body = "";
    //     nowRow.forEach(function (o) {
    //         body += "<td>" + o["planOrderCode"] + "</td>";
    //         body += "<td>" + o["customName"] + "</td>";
    //         body += "<td>" + o["schedulMachineCode"] + "</td>";
    //         body += "<td>" + o["greyCode"] + "</td>";
    //         body += "<td>" + o["greyName"] + "</td>";
    //         body += "<td>" + o["fabricType"] + "</td>";
    //         body += "<td>" + o["orderWeight"] + "</td>";
    //         body += "<td>" + o["noPmtWeight"] + "</td>";
    //         body += "<td>" + o["pmtWeight"] + "</td>";
    //         body += "<td>" + o["productWeight"] + "</td>";
    //         body += "<td>" + (o["planOrderState"] == 0 ? "正常" : (o["planOrderState"] == 1 ? "急" : "紧急")) + "</td>";
    //         body += "<td>" + (o["planState"] == 0 ? "自行生产" : "") + "</td>";
    //         body += "</tr>";
    //     })
    //     tableToXlsx(head, '计划单排产-已排产', body)
    //     console.log(table)
    // }
    post({
      url: '/planSingle/planSchedul/getExportExcel',
      data: {
        schedulState: 2,
        schedulMachineCode: form.schedulMachineCode,
        customName: form.customName,
        planOrderCode: form.planOrderCode,
        greyCode: form.greyCode,
      },
    }).then(({ data, code }: any) => {
      if (code === 200) {
        EXELTABLE(tc, data, '计划单排产-已排产')
      }
    })
  }

  function tableToXlsx(head: any, filename: any, body: any) {
    const uri = 'data:application/vnd.ms-excel;base64,',
      template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`

    const a = document.createElement('a')
    a.href = uri + window.btoa(unescape(encodeURIComponent(template)))
    a.download = filename
    a.click()
    document.removeChild(a)
  }

  let dataForms: any = reactive({})
  let isSz: any
  const pickings = async () => {
    if (selectedRowKeys.value.length === 0) {
      Message.error('请先勾选')
      return
    }
    if (selectedRowKeys.value.length > 1) {
      Message.error('只能勾选一条')
      return
    }
    const piCodeArray: any = table.dataList.filter((val: any) => {
      return selectedRowKeys.value[0] == val.id
    })
    let isDssIs: any = []
    table.dataList.forEach((val: any) => {
      if (selectedRowKeys.value == val.id) {
        isDssIs.push(val.planOrderCode)
      }
    })
    const res: any = await post({
      url: 'planSingle/planSchedul/redisOut',
      data: isDssIs,
    })

    if (res.code == 200) {
      //领料单
      const resu: any = await post({
        url: 'planSingle/planNeed/getList',
        data: {
          planOrderCode: piCodeArray[0].planOrderCode,
        },
      })
      if (resu.code == 200) {
        if (resu.data.length != 0) {
          Message.error('该订单已开需求单')
          return
        } else {
          //自动生成接口
          const res: any = await post({
            url: 'planSingle/planNeed/getAutomaticInfo',
          })
          if (res.code == 200) {
            dataForms.planNeedCode = res.data.planNeedCode
            dataForms.planDate = res.data.planDate
            dataForms.tabulationPerson = res.data.tabulationPerson
            let newDataList: any = table.dataList.filter((val: any) => {
              return selectedRowKeys.value[0] == val.id
            })
            dataForms.weaveCode = newDataList[0].weaveCode
            dataForms.planOrderCode = newDataList[0].planOrderCode
            dataForms.greyName = newDataList[0].greyName
            dataForms.greyCode = newDataList[0].greyCode
            const resq: any = await post({
              url: 'planSingle/planNeed/getData',
              data: newDataList[0],
            })
            if (resq.code == 200) {
              tables.handleSuccess(resq.data)
              pageData.showAdd = true
            } else {
              Message.error(resq.message)
            }
          } else {
            Message.error(res.message)
          }
        }
      }
    } else {
      Message.error(res.message)
    }

    isSz = setInterval(() => {
      post({
        url: 'planSingle/planSchedul/redisOut',
        data: isDssIs,
      })
    }, 290000)
  }
  const formRef = ref()
  const formRefs = ref()
  const sideOks = async () => {
    // const DatasArry: any = table.dataList.filter((val: any) => {
    //     return (selectedRowKeys.value[0] == val.id)
    // })
    // const res = await post({
    //     url: 'planSingle/PlanPick/insert',
    //     data: [dataForms]
    // })
    // if (res.code == 200) {
    //     tables.dataList.forEach((item: any) => {
    //         item.planPickId = res.data
    //         item.planOrderId = DatasArry[0].planOrderId
    //     })
    //     const resz = await post({
    //         url: 'planSingle/PlanPickDetail/insert',
    //         data: tables.dataList
    //     })
    //     if (resz.code == 200) {
    //         Message.success('保存成功')
    //         formRef.value?.resetFields()
    //         tables.handleSuccess([])
    //         pageData.showAdd = false
    //     }
    // }
    const res: any = await post({
      url: 'planSingle/planNeed/insert',
      data: {
        ...dataForms,
        planNeedList: tables.dataList,
      },
    })
    if (res.code == 200) {
      for (let item in dataForms) {
        dataForms[item] = ''
      }
      clearInterval(isSz)
      post({
        url: 'planSingle/planSchedul/upRedis',
      })
      tables.handleSuccess([])
      pageData.showAdd = false
      Message.success(res.message)
    } else {
      Message.error(res.message)
    }
  }

  const sideNo1 = () => {
    for (let item in dataForms) {
      dataForms[item] = ''
    }
    clearInterval(isSz)
    post({
      url: 'planSingle/planSchedul/upRedis',
    })
    tables.handleSuccess([])
    pageData.showAdd = false
  }
  const print = () => {
    printJS({
      printable: 'jitdy',
      type: 'html',
      targetStyles: ['*'],
    })
  }
  const prints = () => {
    printJS({
      printable: 'zbdy',
      type: 'html',
      targetStyles: ['*'],
    })
  }
  const visible1 = reactive({
    showAdd: false,
  })
  let isS: any
  const dyBf = async () => {
    if (selectedRowKeys.value.length === 0) {
      Message.error('请先勾选')
      return
    }
    if (selectedRowKeys.value.length > 1) {
      Message.error('只能勾选一条')
      return
    }
    let isSsss: any = []
    table.dataList.forEach((item: any) => {
      if (item.id == selectedRowKeys.value[0]) {
        isSsss.push(item.planOrderCode)
      }
    })
    const jvData: any = table.dataList.filter((res: any) => {
      return selectedRowKeys.value[0] == res.id
    })
    if (jvData[0].customName == '') {
      Message.error('该计划单没有选择客户名称')
      return
    } else {
      emitter.emit('hqJhd', jvData)
      const res: any = await post({
        url: 'planSingle/clothfiy/getAutomaticInfo',
        data: {
          customName: jvData[0].customName,
        },
      })
      if (res.code == 200) {
        emitter.emit('hqzdy', res.data)
        visible1.showAdd = true
      } else {
        Message.error(res.message)
      }
    }
  }

  const zzpzdata = ref<any>()
  const sjdata: any = reactive<{ sj: any[] }>({ sj: [] })
  let psList = ref<any[]>([])
  const ckpzobj = reactive({
    id: 0,
    pinHeader: '',
    arrangement: '',
  })
  const tags = [
    { id: '1', val: '̶' },
    { id: '2', val: 'Ո' },
    { id: '3', val: 'Ս' },
    { id: '4', val: 'Ʌ' },
    {
      id: '5',
      val: 'V',
    },
  ]

  let isDatasShuju: any = reactive({
    grey: [{}],
    planOrderRawmaterials: [{}],
    machineStandard: [{}],
  })
  const zbtzds = async () => {
    if (selectedRowKeys.value.length === 0) {
      Message.error('请先勾选')
      return
    }
    // if (selectedRowKeys.value.length > 1) {
    //     Message.error('只能勾选一条')
    //     return
    // }
    const dataListArray = table.dataList.filter((val: any) => {
      return val.id == selectedRowKeys.value[0]
    })
    const res: any = await post({
      url: 'planSingle/planSchedul/getPrintMachineInfo',
      data: [
        {
          id: dataListArray[0].id,
          planOrderId: dataListArray[0].planOrderId,
          greyCode: dataListArray[0].greyCode,
          greyName: dataListArray[0].greyName,
        },
      ],
    })
    if (res.code == 200) {
      if (res.data[0].grey.length != 0) {
        isDatasShuju = res.data[0]
        post({
          url: 'product/pdGreyInformation/select',
          data: {
            id: res.data[0].grey[0].id,
          },
        }).then(({ code, data }) => {
          if (code === 200) {
            // console.log({ ...res.data[0], ...data, arrangementTriangleGreys: data.arrangementTriangleGreys.info })
            post({
              url: 'planSingle/planOrder/printShippingData',
              // data: [{ ...res.data[0], ...data, arrangementTriangleGreys: data.arrangementTriangleGreys.info }],
              data: selectedRowList.value,
              responseType: 'blob',
            }).then((zzx: any) => {
              let reader = new FileReader()
              reader.readAsDataURL(zzx)
              reader.onload = function () {
                let pdfBase64 = reader.result.replace('data:application/pdf;base64,', '')
                printJS({ printable: pdfBase64, type: 'pdf', base64: true })
              }
            })
            // dataFormsz.machineType = res.data[0].grey[0].machineType
            // // 组织排针 数据
            // zzpzdata.value = data.organizationPinSons.length == 0 ? [{
            //     "upBasin": "",
            //     belowBasin: "",
            //     id: "",
            //     pdOrganizationPinId: ''
            // }] : data.organizationPinSons;
            // // 裁口排针
            // if (data.cuttingMouthNeedleGrey != null) {
            //     let cuttingMouthNeedleGrey = data.cuttingMouthNeedleGrey
            //     ckpzobj.id = cuttingMouthNeedleGrey.id;
            //     ckpzobj.pinHeader = cuttingMouthNeedleGrey.pinHeader;
            //     ckpzobj.arrangement = cuttingMouthNeedleGrey.arrangement;
            // }
            // //tw加
            // if (data.cuttingMouthNeedleGrey != null && data.cuttingMouthNeedleGrey.length > 0) {
            //     ckpzobj.pinHeader = data.cuttingMouthNeedleGrey[0].pinHeader
            //     ckpzobj.arrangement = data.cuttingMouthNeedleGrey[0].arrangement
            // }
            // // 排三角arrangementTriangleGreys
            // sjdata.sj = data.arrangementTriangleGreys.info
            // // sjdata.sjid=data.arrangementTriangleGreys.greyId
            // // psjpb.value=data.arrangementTriangleGreys.greyId 现有坯布
            // sjdata.atCode = data.arrangementTriangleGreys.atCode
            // sjdata.atName = data.arrangementTriangleGreys.atName
            // sjdata.remark = data.arrangementTriangleGreys.remark
            // psList.value = data.atOther
            // console.log(sjdata)
            // console.log(psList)
          } else {
            Message.error('获取原料失败')
          }
        })
        // visibles1.value = true
      } else {
        Message.error('计划单坯布不存在')
      }
    } else {
      Message.error('未知错误')
    }
  }

  const zbtzdDjs = async () => {
    if (selectedRowKeys.value.length === 0) {
      Message.error('请先勾选')
      return
    }
    const dataListArray = table.dataList.filter((val: any) => {
      return val.id == selectedRowKeys.value[0]
    })
    const res: any = await post({
      url: 'planSingle/planSchedul/getPrintMachineInfo',
      data: [
        {
          id: dataListArray[0].id,
          planOrderId: dataListArray[0].planOrderId,
          greyCode: dataListArray[0].greyCode,
          greyName: dataListArray[0].greyName,
        },
      ],
    })
    if (res.code == 200) {
      if (res.data[0].grey.length != 0) {
        isDatasShuju = res.data[0]
        post({
          url: 'product/pdGreyInformation/select',
          data: {
            id: res.data[0].grey[0].id,
          },
        }).then(({ code, data }) => {
          if (code === 200) {
            // console.log({ ...res.data[0], ...data, arrangementTriangleGreys: data.arrangementTriangleGreys.info })
            post({
              url: 'planSingle/planOrder/printShippingDataOld',
              // data: [{ ...res.data[0], ...data, arrangementTriangleGreys: data.arrangementTriangleGreys.info }],
              data: selectedRowList.value,
              responseType: 'blob',
            }).then((zzx: any) => {
              let reader = new FileReader()
              reader.readAsDataURL(zzx)
              reader.onload = function () {
                let pdfBase64 = reader.result.replace('data:application/pdf;base64,', '')
                printJS({ printable: pdfBase64, type: 'pdf', base64: true })
              }
            })
          } else {
            Message.error('获取原料失败')
          }
        })
        // visibles1.value = true
      } else {
        Message.error('计划单坯布不存在')
      }
    } else {
      Message.error('未知错误')
    }
  }
  emitter.on('qxs', () => {
    clearInterval(isS)
    post({
      url: 'planSingle/planSchedul/upRedis',
    })
  })

  const dataFormsz: any = reactive({
    planTechnologyCode: '',
    schedulCode: '',
    alreadyWeight: '',
    planOrderCode: '',
    orderWeight: '',
    greyCode: '',
    greyName: '',
    width: '',
    weight: 0,
    workshop: '',
    machineCode: '',
    machineType: '',
  })

  const machineList: any = ref([])

  const dataFormszs: any = reactive({
    machineSpeed: 0,
    compete: '',
    greyGlue: '',
    greyTension: 0,
    clothRackWidth: 0,
    needleHigh: 0,
    machineGWeight: 0,
    washGWeight: 0,
    washSeal: 0,
    furHigh: 0,
    yarnTension: 0,
    workDrum: '',
    beadJuggle: '',
    sumNeedleCount: '',
    densityCPI: '',
    densityWPI: '',
    yarnLong: '',
    needleType: '',
  })

  const gyList = reactive({
    showAdd: false,
  })

  const dataYuls: any = ref([])

  const addZgydss = () => {
    if (selectedRowKeys.value.length === 0) {
      Message.error('请先勾选')
      return
    }
    if (selectedRowKeys.value.length > 1) {
      Message.error('只能勾选一条')
      return
    }
    const dataListArray = table.dataList.filter((val: any) => {
      return val.id == selectedRowKeys.value[0]
    })
    post({
      url: 'planSingle/PlanTechnology/getPlanTechnologyInfo',
      data: dataListArray[0],
    }).then((res: any) => {
      if (res.code == 200) {
        for (let v in dataFormsz) {
          dataFormsz[v] = res.data[v]
        }
        dataFormszs.workDrum = dataListArray[0].workDrum
        // console.log("--",dataFormsz)
        //唐威加
        if (dataFormsz['weight'] == undefined) {
          dataFormsz['weight'] = 0
        }
        post({
          url: 'product/pdGreyInformation/selectpdGreyInformation',
          data: {
            greyCode: res.data.greyCode,
          },
        }).then((resz: any) => {
          if (resz.code == 200) {
            let ids: any
            ids = resz.data[0]?.id
            dataFormsz.machineType = resz.data[0].machineType
            post({
              url: 'product/pdGreyInformation/select',
              data: {
                id: ids,
              },
            }).then(({ code, data, message }) => {
              if (code == 200) {
                dataFormsz.weight = data.greyInformation.finishedWeight || ''
                dataYuls.value = data.yarnStructures

                // 组织排针 数据
                zzpzdata.value =
                  data.organizationPinSons.length == 0
                    ? [
                        {
                          upBasin: '',
                          belowBasin: '',
                          id: '',
                          pdOrganizationPinId: '',
                        },
                      ]
                    : data.organizationPinSons
                // 裁口排针
                if (data.cuttingMouthNeedleGrey != null) {
                  let cuttingMouthNeedleGrey = data.cuttingMouthNeedleGrey
                  ckpzobj.id = cuttingMouthNeedleGrey.id
                  ckpzobj.pinHeader = cuttingMouthNeedleGrey.pinHeader
                  ckpzobj.arrangement = cuttingMouthNeedleGrey.arrangement
                }
                // 排三角arrangementTriangleGreys
                sjdata.sj = data.arrangementTriangleGreys.info
                // sjdata.sjid=data.arrangementTriangleGreys.greyId
                // psjpb.value=data.arrangementTriangleGreys.greyId 现有坯布
                sjdata.atCode = data.arrangementTriangleGreys.atCode
                sjdata.atName = data.arrangementTriangleGreys.atName
                sjdata.remark = data.arrangementTriangleGreys.remark
                psList.value = data.atOther
                //关联商品
                sptablecolData.value = data.commodities
                gyList.showAdd = true
              } else {
                Message.error(message)
              }
            })
          } else {
            Message.error(res.message)
          }
        })
        machineList.value = res.data.machine
      } else {
        Message.error(res.message)
      }
    })
  }

  const macChanges = (e: any) => {
    if (e != undefined || e != '') {
      post({
        url: '/planSingle/adjustment/getMachineInfoByCode',
        data: {
          planOrderCode: dataFormsz.planOrderCode,
          greyCode: dataFormsz.greyCode,
          greyName: dataFormsz.greyName,
          machineCode: e,
        },
      }).then((res: any) => {
        if (res.code == 200) {
          dataFormsz.alreadyWeight = res.data.alreadyWeight
        }
      })
    }
  }

  const gydOk = () => {
    formRefs.value?.validate().then((err: any) => {
      if (!err) {
        post({
          url: 'planSingle/PlanTechnology/insert',
          data: {
            ...dataFormsz,
            ...dataFormszs,
          },
        }).then((res: any) => {
          if (res.code == 200) {
            Message.success('成功')
            for (let i in dataFormszs) {
              dataFormszs[i] = ''
            }
            for (let i in dataFormsz) {
              dataFormsz[i] = ''
            }
            gyList.showAdd = false
          } else {
            Message.error(res.message)
          }
        })
      }
    })
  }
  const gydNo = () => {
    gyList.showAdd = false
  }

  const sptablecolData: any = ref([])

  const sptablecol: any = [
    {
      dataIndex: 'commodityCode',
      key: 'commodityCode',
      title: '商品编码',
    },
    {
      dataIndex: 'commodityName',
      key: 'commodityName',
      title: '商品名称',
    },
    {
      dataIndex: 'brandName',
      key: 'brandName',
      title: '品牌',
    },
    {
      dataIndex: 'colorType',
      key: 'colorType',
      title: '染色类型',
    },
    {
      dataIndex: 'merceryName',
      key: 'merceryName',
      title: '布料名称',
    },
    {
      dataIndex: 'productType',
      key: 'productType',
      title: '产品类型',
    },
  ]

  const form: any = reactive({
    customName: '',
    planOrderCode: '',
    greyCode: '',
    schedulMachineCode: '',
  })

  const huiche = () => {
    doRefresh()
  }

  const bfShowAdd: any = ref(false)
  let srcUrl = ref()
  const dyBoufeixs = async () => {
    if (selectedRowKeys.value.length === 0) {
      Message.error('请先勾选')
      return
    }
    if (selectedRowKeys.value.length > 1) {
      Message.error('只能勾选一条')
      return
    }
    const jvData: any = table.dataList.filter((res: any) => {
      return selectedRowKeys.value[0] == res.id
    })
    if (jvData[0].customName == '') {
      Message.error('该计划单没有选择客户名称')
      return
    } else {
      const res: any = await post({
        url: 'planSingle/clothfiy/getAutomaticInfo',
        data: {
          customName: jvData[0].customName,
        },
      })
      if (res.code == 200) {
        srcUrl.value = `./hiprint/custom2.html?modelData=${JSON.stringify(res.data)}&jhd=${
          jvData[0].planOrderCode
        }`
        bfShowAdd.value = true
      } else {
        Message.error(res.message)
      }
    }
  }

  const bc = () => {
    bfShowAdd.value = false
  }
  const { saveGridState: saveGridState01, updateGridState: updateGridState01 } =
    saveOrUpdateGridState01('ScheduledProduction-1', gridOption, colState, tc)
  const onColumnMoved = () => {
    saveGridState01()
  }
  const onColumnResized = () => {
    saveGridState01()
  }
  const onColumnVisible = () => {
    saveGridState01()
  }
</script>
<style lang="less" scoped>
  .cssToolbar {
    text-align: right;
    margin-bottom: 2px;
  }

  .isZbous {
    width: 800px;
    // margin-left: 15px;
    margin: 0;
    padding: 0;
    margin: 0 auto;
    zoom: 0.7;

    .isZbouss {
      width: 100%;
      text-align: center;
      font-size: 24px;
      font-weight: 600;
    }

    .isZbouss1 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      font-weight: 600;

      .isZbouss1-1 {
        font-size: 22px;
        font-weight: 600;
      }
    }

    .isZbouss2 {
      width: 70%;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      font-weight: 600;
    }
  }

  #jitdy2 {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    font-size: 24px;
  }

  .isTable {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    border: 1.2px solid #ccc;
    text-align: center;
    border-collapse: collapse;

    tr {
      height: 10px;
    }

    td {
      border: 1.2px solid #ccc;
    }
  }

  .isTable1 {
    width: 100%;
    height: 100px;
    margin: 0 auto;
    border: 1.2px solid #ccc;
    text-align: center;
    border-collapse: collapse;
    margin-top: 20px;

    td {
      border: 1.2px solid #ccc;
    }

    .isTrTdNo {
      td {
        border-top: 1.2px solid #fff;
        border-right: 1.2px solid #fff;
        border-left: 1.2px solid #fff;
        color: #fff;
        opacity: 0;
      }
    }
  }

  .isTable2 {
    width: 100%;
    height: 80px;
    margin: 0 auto;
    border: 1.2px solid #ccc;
    text-align: center;
    border-collapse: collapse;
    margin-top: 20px;

    td {
      border: 1.2px solid #ccc;
    }
  }

  .footer {
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
    text-align: left;

    .footer2 {
      width: 100%;
      text-align: right;
      font-size: 20px;
      font-weight: 600;
    }
  }

  .gyYaoqiu {
    width: 100%;
    text-align: center;
    font-size: 16px;
    margin: 0 auto;
    border-bottom: 1.2px solid #ccc;
    border-left: 1.2px solid #ccc;
    border-right: 1.2px solid #ccc;
  }

  .thead {
    white-space: nowrap;
    justify-content: center;

    .th {
      box-sizing: border-box;
      text-align: center;
      display: inline-block;
    }

    width: 100%;
    text-align: left;
  }

  .tbody {
    white-space: nowrap;
    justify-content: center;

    .td {
      text-align: center;
      box-sizing: border-box;
      display: inline-block;
    }

    text-align: left;
  }

  .trow > div {
    display: inline-block;
    text-align: center;
  }

  .active {
    width: 80px !important;
  }

  .gyYaoqius {
    width: 100%;
    margin: 0 auto;
    border-bottom: 1.2px solid #ccc;
    border-left: 1.2px solid #ccc;
    border-right: 1.2px solid #ccc;
  }

  .trTds {
    font-size: 16px;
    font-weight: 600;
  }

  .footers {
    width: 100%;
    margin: 0 auto;

    div {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
    }
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }

  :deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
